import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false


import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
import FOND from './views/FOND.vue'

import Recommend from './views/second/Recommend'
import Ranking from './views/second/Ranking'
import Songlist from './views/second/Songlist'

// 1 引入find组件
import VueRoter from 'vue-router'

// 2 vue.use函数就是在装插件  全局
Vue.use(VueRoter)

// 3 配置路由对象规则
// 一个对象表示一条映射规则，请求什么路径，切换什么组件
let routes = [{
    path: '/',
    redirect: '/find' //强制跳转
  },
  {
    name: 'Find',
    path: '/find',
    component: Find,
    children: [
      //   {
      // path: '/find',
      //     redirect: '/find/ranking' //强制跳转
      //   },
      {
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'ranking',
        component: Ranking
      },
      {
        path: 'songlist',
        component: Songlist
      },
    ]
  },
  {
    name: 'My',
    path: '/My',
    component: My
  },
  {
    name: 'Part',
    path: '/Part',
    component: Part
  },
  {
    path: '/Part/:name/:age',
    component: Part
  },
  {
    path: '*',
    component: FOND
  }
]

// 4 根据规则创建路由对象
let router = new VueRoter({
  routes
})


// 5 将路由对象注入到 new Vue创建的实例中
new Vue({
  render: h => h(App),
  router
}).$mount('#app')